import React, { Component } from 'react'
import Header from './Header/header';
import List from './List/list';
import Floor from './Floor/floor';
import './Header/style.css';

export default class App extends Component {
    //初始数据
    state = {
        todos:[
            { id:'001',name:"吃饭",done:true },
            { id:'002',name:"睡觉",done:true },
            { id:'003',name:"打代码",done:false },
            { id:'004',name:"逛街",done:false },
        ]
    }
    //添加一个数据
    AppAddTodo = (todo) => {
        const {todos} = this.state
        const newtodos = [todo,...todos]
        this.setState({todos:newtodos})
    }
    //更新动作的完成状态
    UpdateTodo = (id,done) =>{
        const {todos} = this.state
        const newtodo = todos.map((todoObj)=>{
            if(todoObj.id === id)
            {
                //匹配修改值
                return {...todoObj,done}
            }
            else return todoObj
        })
        //赋值state
        this.setState({todos:newtodo})
    }
    //删除一个动作
    DeleteTodo = (id) =>{
        const {todos} = this.state
        const newtodo = todos.filter((todoObj)=>{
            return todoObj.id !== id
        })
        console.log(newtodo)
        this.setState({todos:newtodo})
    }
    //全选和取消全选
    CheckAllTodo = (flag) => {
        const {todos} = this.state
        const newtodo = todos.map((todo) => {
            console.log(todo.done,flag)
            return {...todo,done : flag}
        })
        this.setState({todos:newtodo})
    }
    //删除所有已经完成的动作
    ClearAlldone = () => {
        const {todos} =this.state
        const newtodo = todos.filter((todoobj) => {
            return !todoobj.done
        })
        this.setState({todos:newtodo})
    }
    render() {
        return (
            <div className='todo-container'>
                <div className='todo-wrap'>
                    <Header AppAddTodo={this.AppAddTodo}/>
                    <List todos={this.state.todos} UpdateTodo={this.UpdateTodo} DeleteTodo={this.DeleteTodo}/>
                    <Floor todos={this.state.todos} CheckoutTodo={this.CheckoutTodo} CheckAllTodo={this.CheckAllTodo} ClearAlldone={this.ClearAlldone}/>
                </div>
            </div>
        )
    }
}
